<template>
  <div  class="app-container2">
    <el-row>
      <el-col :span="4">
        <el-table
          :data="leftList"
          style="width: 100%"
          row-key="id"
          :expand-row-keys="expands"
          @row-click="rowClick"
          :tree-props="{ children: 'childlist', hasChildren: 'hasChildren' }"
        >
          <el-table-column prop="name" label="组织名称" align="left">
          </el-table-column>
        </el-table>
      </el-col>
      <el-col :span="1">
        <div
          style="height: 839px; background: #e8e8e8; margin: 0 8px; width: 1px"
        ></div>
      </el-col>
      <el-col :span="19">
        <div
          style="display: flex; justify-content: space-between"
          v-if="tabList.length"
        >
          <el-tabs
            v-model="activeName"
            @tab-click="handleClick"
            style="flex: 1"
          >
            <el-tab-pane
              :label="`第${toChinesNum(item.year)}届`"
              :name="String(item.year)"
              v-for="(item, index) in tabList"
              :key="item.id"
            >
              <div  style="text-align: center; display: flex">
                <div  style="width: 33.3%"></div>
                <div
                  
                  style="
                    color: #333333;
                    font-size: 20px;
                    flex: 1;
                    line-height: 36px;
                  "
                >
                  {{ ruleForm.orgname }}第{{
                    toChinesNum(ruleForm.year)
                  }}届领导班子
                </div>
                <div
                  
                  style="width: 33.3%; display: flex; justify-content: end"
                >
                  <el-button icon="el-icon-delete" @click="deletetransyear"
                    >删除换届</el-button
                  >
                  <!-- <el-button>换届信息</el-button> -->
                  <el-button
                    icon="el-icon-user"
                    @click="
                      (type = 2), (title = '添加成员'), (dialogVisible = true)
                    "
                    >添加成员</el-button
                  >
                </div>
              </div>
              <div class="list">
                <div
                  class="cardItem"
                  v-for="(item, index) in rightList"
                  :key="index"
                >
                  <div class="cardItem-img">
                    <img :src="item.imageUrl" alt="" />
                  </div>
                  <div class="cardItem-con">
                    <div class="title">{{ item.username }}</div>
                    <div class="description">
                      {{ getName(item.dutyid, jobNameList) }}
                    </div>
                  </div>
                  <div style="display: flex; justify-content: center">
                    <el-button-group>
                      <el-button
                        type="primary"
                        size="mini"
                        @click="changeItem(1, item)"
                        >修改</el-button
                      >

                      <el-button
                        type="primary"
                        size="mini"
                        @click="changeItem(2, item)"
                        >删除</el-button
                      >
                    </el-button-group>
                  </div>
                </div>
              </div>
            </el-tab-pane>
          </el-tabs>
          <el-button
            @click="(title = '新增换届'), (type = 1), (dialogVisible = true)"
            style="position: absolute; right: 0"
            icon="el-icon-plus"
            >新增换届</el-button
          >
        </div>
        <div  v-else style="display: flex; justify-content: center">
          <el-card
            shadow="never"
            :body-style="{ padding: '0px' }"
            style="width: 382px"
          >
            <el-empty description="目前还没有添加换届信息"></el-empty>
            <div style="padding: 14px">
              <div
                class="bottom clearfix"
                style="display: flex; justify-content: center"
              >
                <!-- <div  style="line-height: 24px;font-size: 16px;margin-bottom: 16px;">目前还没有添加换届信息</div> -->
                <el-button
                  class="button"
                  style="text-align: center"
                  @click="
                    (title = '新增换届'), (type = 1), (dialogVisible = true)
                  "
                  >新增换届</el-button
                >
              </div>
            </div>
          </el-card>
        </div>
      </el-col>
    </el-row>
    <el-dialog
      :title="title"
      :visible.sync="dialogVisible"
      width="700px"
      @close="resetForm()"
    >
      <el-form
        :model="ruleForm"
        :rules="rules"
        ref="ruleForm"
        label-width="100px"
        class="ruleForm"
        inline
      >
        <el-form-item label="党组织名称" prop="orgname">
          <el-input disabled v-model="ruleForm.orgname"></el-input>
        </el-form-item>
        <el-form-item label="届数" prop="year">
          <el-input
            :disabled="type == 2"
            v-model="ruleForm.year"
            type="number"
            min="0"
            placeholder="请输入届数"
          ></el-input>
        </el-form-item>
        <template v-if="type == 2">
          <el-form-item label="姓名" prop="userid">
            <el-select
              @change="changeName"
              v-model="ruleForm.userid"
              filterable
              placeholder="请选择人员"
            >
              <el-option
                v-for="item in userList"
                :key="item.id"
                :label="item.username"
                :value="item.id"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="职务名称" prop="dutyid">
            <el-select
              v-model="ruleForm.dutyid"
              clearable
              placeholder="请选择职务名称"
            >
              <el-option
                v-for="item in jobNameList"
                :key="item.id"
                :label="item.configname"
                :value="item.id"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="任职方式" prop="appointmentid">
            <el-select
              v-model="ruleForm.appointmentid"
              clearable
              placeholder="请选择任职方式"
            >
              <el-option
                v-for="item in wayList"
                :key="item.id"
                :label="item.configname"
                :value="item.id"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="任职时间" prop="appointtime">
            <el-date-picker
              v-model="ruleForm.appointtime"
              type="date"
              placeholder="请选择任职时间"
              format="yyyy-MM-dd"
              value-format="yyyy-MM-dd"
            >
            </el-date-picker>
          </el-form-item>
        </template>

        <template v-if="type == 2">
          <el-form-item label="任职年限" prop="appointyear">
            <el-select
              v-model="ruleForm.appointyear"
              clearable
              placeholder="请选择任职年限"
            >
              <el-option label="3" :value="3"></el-option>
              <el-option label="5" :value="5"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="任职文号" prop="appointcode">
            <el-input
              v-model="ruleForm.appointcode"
              placeholder="请输入任职文号"
            ></el-input>
          </el-form-item>
          <el-form-item label="任职情况" prop="appointremarkid">
            <el-select
              v-model="ruleForm.appointremarkid"
              clearable
              placeholder="请选择任职情况"
            >
              <el-option
                v-for="item in conditionList"
                :key="item.id"
                :label="item.configname"
                :value="item.id"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="行政职务" prop="xzduty">
            <el-input
              v-model="ruleForm.xzduty"
              placeholder="请输入行政职务"
            ></el-input>
          </el-form-item>
          <el-form-item label="排序" prop="ordernum">
            <el-input
              v-model="ruleForm.ordernum"
              type="number"
              min="0"
              placeholder="请输入排序"
            ></el-input>
          </el-form-item>
          <el-form-item v-if="type == 2"></el-form-item>
          <el-form-item label="照片" prop="pictureurl">
            <el-upload
              class="avatar-uploader"
              action
              :show-file-list="false"
              :auto-upload="false"
              :on-change="handleChange"
              accept=".jpg,.png"
            >
              <img
                v-if="ruleForm.imageUrl"
                :src="ruleForm.imageUrl"
                class="avatar"
              />
              <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
            <p>只支持.jpg.png.jpeg格式 建议上传1寸照片 尺寸295*413</p>
          </el-form-item>
        </template>

        <template v-if="type == 1">
          <el-form-item label="任职年限" prop="yearlimit">
            <el-select
              v-model="ruleForm.yearlimit"
              clearable
              placeholder="请选择任职年限"
            >
              <el-option label="3" :value="3"></el-option>
              <el-option label="5" :value="5"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="换届时间" prop="transtime">
            <el-date-picker
              v-model="ruleForm.transtime"
              type="date"
              placeholder="请选择换届时间"
              format="yyyy-MM-dd"
              value-format="yyyy-MM-dd"
            >
            </el-date-picker>
          </el-form-item>
          <el-form-item label="应到会人数" prop="shouldcount">
            <el-input
              v-model="ruleForm.shouldcount"
              type="number"
              min="0"
              placeholder="请输入应到会人数"
            ></el-input>
          </el-form-item>
          <el-form-item label="实到会人数" prop="realisticcount">
            <el-input
              v-model="ruleForm.realisticcount"
              type="number"
              min="0"
              :max="ruleForm.shouldcount"
              placeholder="请输入实到会人数"
            ></el-input>
          </el-form-item>
          <el-form-item label="换届形式" prop="wayid">
            <el-select v-model="ruleForm.wayid" clearable placeholder="请选择">
              <el-option
                v-for="item in transboundaryList"
                :key="item.id"
                :label="item.configname"
                :value="item.id"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="沿用上届成员" prop="iscontinue">
            <el-select
              v-model="ruleForm.iscontinue"
              clearable
              placeholder="请选择"
            >
              <el-option label="是" :value="1"></el-option>
              <el-option label="否" :value="0"></el-option>
            </el-select> </el-form-item
        ></template>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="(dialogVisible = false), resetForm()"
          >取 消</el-button
        >
        <el-button
          :disabled="btnLoading"
          type="primary"
          @click="submitForm('ruleForm')"
          >确 定</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>

<script>
import {
  parentlist,
  getyearlist,
  addtransyear,
  addteamperson,
  uploadteampic,
  getteamlist,
  deleteTransYear,
  deleteteamperson,
  editteamperson,
} from "@/api/tissue";
import { getConfigList } from "@/api/setting";
import { listUser } from "@/api/system/users";
export default {
  data() {
    return {
      title: "",
      loading: false,
      btnLoading: false,
      dialogVisible: false,
      transboundaryForm: {},
      transboundaryVisible: false,
      list: [],
      ruleForm: {
        id: null,
        tradeId: null,
        orgid: "", //党组织id
        orgname: "", //党组织名称
        realisticcount: "", //实到人数
        shouldcount: "", //应到人数
        transtime: "", //换届时间
        wayid: "", //换届形式
        year: "", //届数
        yearlimit: "", //任职年限
        status: "", //状态
        iscontinue: "", //是否沿用

        userid: "", //用户id
        username: "", //用户姓名
        dutyid: "",
        appointmentid: "",
        appointtime: "",
        appointyear: "",
        appointcode: "",
        appointremarkid: "",
        xzduty: "",
        ordernum: "",
        pictureurl: "",
        imageUrl: "",
      },
      type: 1, //1新增、编辑换届2新增成员
      activeName: "",
      expands: [], //默认展开行的数组
      rules: {
        orgname: [
          { required: true, message: "请选择党组织名称", trigger: "blur" },
        ],
        year: [{ required: true, message: "请输入届数", trigger: "blur" }],
        yearlimit: [
          { required: true, message: "请选择任职年限", trigger: "change" },
        ],
        transtime: [
          { required: true, message: "请选择换届时间", trigger: "change" },
        ],
        wayid: [
          { required: true, message: "请选择换届形式", trigger: "change" },
        ],

        userid: [{ required: true, message: "请选择人员", trigger: "change" }],
        dutyid: [
          { required: true, message: "请选择职务名称", trigger: "change" },
        ],
        appointmentid: [
          { required: true, message: "请选择任职方式", trigger: "change" },
        ],
        appointtime: [
          { required: true, message: "请选择任职时间", trigger: "change" },
        ],
        appointyear: [
          { required: true, message: "请选择任职年限", trigger: "change" },
        ],
        pictureurl: [{ required: true, message: "请上传图片" }],
      },
      form: {},
      leftList: [],
      tabList: [],
      rightList: [],
      transboundaryList: [], //
      userList: [], //用户列表
      jobNameList: [], //职务名称列表
      wayList: [], //任职方式列表
      conditionList: [], //任职情况列表
    };
  },
  methods: {
    changeItem(type, item) {
      if (type == 1) {
        this.type = 2;
        this.title = "更新成员";
        this.ruleForm.id = item.id;
        let {
          id,
          userid,
          username,
          dutyid,
          appointmentid,
          appointtime,
          appointyear,
          appointcode,
          appointremarkid,
          xzduty,
          ordernum,
          pictureurl,
          imageUrl,
          orgid,
          orgname,
          year,
        } = item;
        this.ruleForm = {
          id,
          userid,
          username,
          dutyid,
          appointmentid,
          appointtime,
          appointyear,
          appointcode,
          appointremarkid,
          xzduty,
          ordernum,
          pictureurl,
          imageUrl,
          orgid,
          orgname,
          year,
        };
        this.dialogVisible = true;
      } else {
        this.$confirm("确定删除班子信息吗？", "确定删除", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        })
          .then(() => {
            deleteteamperson({ id: item.id }).then((res) => {
              this.$modal.msgSuccess(res.msg);
              this.getteamlist();
            });
          })
          .catch(() => {
            this.$message({
              type: "info",
              message: "已取消删除",
            });
          });
      }
    },
    changeName(e) {
      this.userList.forEach((item) => {
        if (e == item.id) {
          this.ruleForm.username = item.username;
        }
      });
    },
    //上传图片
    handleChange(file) {
      let data = new FormData();
      data.append("file", file.raw);
      uploadteampic(data).then((res) => {
        this.ruleForm.pictureurl = res.msg;
        this.ruleForm.imageUrl = process.env.VUE_APP_BASE_API + "/" + res.msg;
        this.$forceUpdate();
      });
    },
    resetForm() {
      this.ruleForm.id = null;
      this.$refs.ruleForm.resetFields();
    },
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.btnLoading = true;
          if (this.type == 1) {
            addtransyear(this.ruleForm)
              .then((res) => {
                this.resetForm();
                this.dialogVisible = false;
                this.btnLoading = false;
                this.$modal.msgSuccess(res.msg);
                this.getyearlist();
              })
              .catch(() => {
                this.btnLoading = false;
              });
          } else {
            let api = this.ruleForm.id
              ? editteamperson(this.ruleForm)
              : addteamperson(this.ruleForm);

            api
              .then((res) => {
                this.dialogVisible = false;
                this.btnLoading = false;
                this.ruleForm.imageUrl = '';
                this.$modal.msgSuccess(res.msg);
                this.resetForm();
                this.getteamlist();
              })
              .catch(() => {
                this.btnLoading = false;
              });
          }
        } else {
          return false;
        }
      });
    },
    rowClick(row) {
      this.ruleForm.orgid = row.id;
      this.ruleForm.orgname = row.name;
      this.getyearlist();
    },
    //删除换届
    deletetransyear() {
      this.$confirm("您确定要删除本届班子吗？", "系统提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          deleteTransYear({ id: this.ruleForm.tradeId }).then((res) => {
            this.getyearlist();
            this.$modal.msgSuccess(res.msg);
          });
        })
        .catch(() => {});
    },
    handleClick(tab) {
      let filteredItem = this.tabList.find((item) => tab.name == item.year);
      if (filteredItem) this.ruleForm.tradeId = filteredItem.id;
      this.ruleForm.year = tab.name;
      this.getteamlist();
    },
    getLeftList() {
      parentlist().then((res) => {
        this.leftList = res.data;
        if (res.data.length) {
          this.expands = [String(res.data[0].id)];
          this.ruleForm.orgid = res.data[0].id;
          this.ruleForm.orgname = res.data[0].name;
          this.getyearlist();
        }
      });
    },
    getyearlist() {
      getyearlist(this.ruleForm).then((res) => {
        this.tabList = res.data;
        res.data.forEach((item) => {
          item.year = String(item.year);
        });
        if (res.data.length) {
          this.activeName = res.data[0].year;
          this.ruleForm.year = res.data[0].year;
          this.ruleForm.tradeId = res.data[0].id;
          this.getteamlist();
        }
      });
    },
    getteamlist() {
      getteamlist(this.ruleForm).then((res) => {
        res.data.forEach((item) => {
          item.imageUrl = process.env.VUE_APP_BASE_API + "/" + item.pictureurl;
        });
        this.rightList = res.data;
      });
    },
    getConfigList() {
      getConfigList({ configflag: "huanjiexingshi" }).then((res) => {
        this.transboundaryList = res.data;
      });
      getConfigList({ configflag: "zhiwumingcheng" }).then((res) => {
        this.jobNameList = res.data;
      });
      getConfigList({ configflag: "renzhifangshi" }).then((res) => {
        this.wayList = res.data;
      });
      getConfigList({ configflag: "renzhiqingkuang" }).then((res) => {
        this.conditionList = res.data;
      });
      listUser().then((res) => {
        this.userList = res.data;
      });
    },
  },
  created() {
    this.getLeftList();
    this.getConfigList();
  },
};
</script>

<style lang="scss" scoped>
.list {
  margin-top: 40px;
  display: flex;
  flex-wrap: wrap;
  .cardItem {
    cursor: pointer;
    height: 305px;
    margin: 0 50px 16px 0;
    .cardItem-img {
      img {
        width: 150px;
        height: 210px;
        text-align: center;
      }
    }
    .cardItem-con {
      padding: 10px;
      text-align: center;
      .title {
        color: black;
        font-size: 16px;
      }
      .description {
        font-size: 14px;
        color: rgba(0, 0, 0, 0.45);
      }
    }
  }
}
::v-deep .avatar-uploader .el-upload {
  width: 136px;
  height: 136px;
  padding: 8px;
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
::v-deep .avatar-uploader .el-upload:hover {
  border-color: #ff4d4f;
}
::v-deep .avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 120px;
  height: 120px;
  line-height: 120px;
  text-align: center;
}
.avatar {
  width: 120px;
  height: 120px;
  display: block;
  border-radius: 6px;
  object-fit: cover;
}
::v-deep .el-table__row {
  cursor: pointer;
}
::v-deep .ruleForm .el-form-item__content {
  width: 220px;
}
</style>
